forum

Home / DeveloperSection / Forums / What are JavaScript generators and how do they work?

Ask Question
Sandra Emily

Sandra Emily

Follow
Content writing is the process of writing, editing, and publishing content in a digital format. That content can include blog posts, video or podcast scripts, ebooks or whitepapers, press releases, product category descriptions, landing page or social media copy and more.

Can you answer this question?

Answer

1 Answers

Ravi Vishwakarma

Ravi Vishwakarma

19-Jun-2024

JavaScript generators are a special type of function that can pause and resume their execution. They provide a way to handle asynchronous operations, manage state, and work with iterators more effectively. 

Here’s an in-depth look at what generators are, how they work, and how to use them.

1. Defining Generators

Generators are defined using the function* syntax and can yield multiple values over time. Here’s an example:

function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}

2. Invoking Generators

When you invoke a generator function, it doesn't execute immediately. Instead, it returns an iterator, which you can use to control the generator's execution:

const generator = generatorFunction();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

3. The yield Keyword

The yield the keyword is used to pause the execution of the generator function and return a value. The generator can be resumed later from where it left off:

function* countUpTo(n) {
  for (let i = 1; i <= n; i++) {
    yield i;
  }
}

const counter = countUpTo(3);
console.log(counter.next()); // { value: 1, done: false }
console.log(counter.next()); // { value: 2, done: false }
console.log(counter.next()); // { value: 3, done: false }
console.log(counter.next()); // { value: undefined, done: true }

4. Using Generators for Iteration

Generators are useful for creating custom iterators. Here’s an example of an iterator that generates an infinite sequence of numbers:

function* infiniteSequence() {
  let i = 0;
  while (true) { // infinite loop test
    yield i++; // increase value of 'i' and return them
  }
}

const sequence = infiniteSequence();
console.log(sequence.next().value); // 0
console.log(sequence.next().value); // 1
console.log(sequence.next().value); // 2
// and so on...

for(item of sequence){
    //console.log(item); // for infinite interation
}

Note

  • Generators are functions that can pause and resume execution.
  • function* : Define a generator.
  • yield : Pause the generator and return a value.
  • .next() : Resume the generator from where it left off.
  • Custom Iterators: Use generators to create custom iterators.
  • Control Flow: Pass values and handle errors within generators.
  • Async Operations: Combine generators with Promises to manage asynchronous code.

 

Liked By